//页面加载就会发送请求,所以需要写在load事件中
window.addEventListener("load", async () => {
  try {
    //发送axios请求
    const res = await axios({
      url: "/dashboard",
      //在请求头信息中注入token,headers中的数据会被放在请求头信息中
      // headers: {
      //   //authorization 首字母不区分大小写
      //   //本地存储中获取token
      //   Authorization: localStorage.getItem("token"),
      //   // authorization: localStorage.getItem("token"),
      // },
    });
    console.log(res.data); //是个对象
    //解构对象
    const { year, groupData, salaryData } = res.data;
    console.log(salaryData);
    // console.log(year);

    // console.log(res); //是个对象

    // console.log(res.data.data.overview);

    //显示预览区域的数据
    const data = res.data.overview; //得到的是一个对象
    // console.log(data);
    //因为要将对象中的值渲染到多个dom元素中,所以需要循环遍历
    //遍历对象
    for (const k in data) {
      document.querySelector(`[name="${k}"]`).innerHTML = data[k];
    }

    //封装薪资走势函数
    function salaryEcharts(year) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector("#line"));
      const option = {
        title: {
          text: "2022全学科薪资走势",
          left: "2%",
          top: "2%",
        },
        xAxis: {
          type: "category",
          data: year.map((v) => v.month),
          axisLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              width: 2,
              type: "dashed",
            },
          },
        },

        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            data: year.map((v) => v.salary),
            type: "line",
            smooth: true,
            symbolSize: "10",
            lineStyle: {
              width: 5,
            },
            areaStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#69aefa", // 0% 处的颜色
                  },
                  {
                    offset: 0.6,
                    color: "#fff", // 100% 处的颜色
                  },
                ],
                global: false, // 缺省为 false
              },
            },
          },
        ],
        color: ["#77bcfb"],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    salaryEcharts(year);

    //小组薪资走势分布图
    function salaryGroup(groupData) {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.querySelector("#lines"));
      const option = {
        xAxis: {
          type: "category",
          data: groupData[1].map((v) => v.name),
          axisLine: {
            lineStyle: {
              type: "dashed",
            },
          },
        },
        yAxis: {
          type: "value",
          splitLine: {
            lineStyle: {
              width: 2,
              type: "dashed",
            },
          },
        },
        series: [
          {
            data: groupData[1].map((v) => v.hope_salary),
            type: "bar",
          },
          {
            data: groupData[1].map((v) => v.salary),
            type: "bar",
          },
        ],
        color: [
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#4cdba9", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#d0f4e8", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#59a4ed", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#d4e6fc", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);

      //点击切换数据
      //点击第几组  就会将对应的组号渲染到页面中
      //先获取元素
      const btns = document.querySelectorAll("#btns button"); //是个伪数组,但是伪数组有forEach方法
      //给元素注册点击事件,因为有多个元素,所以需要遍历
      btns.forEach((dom) => {
        dom.addEventListener("click", function () {
          //排他思想,干掉所有高亮的类名,保留自己的类名
          document
            .querySelector("#btns .btn-blue")
            .classList.remove("btn-blue");
          //给自己加上
          this.classList.add("btn-blue");
          // console.log(this);//这里的this指向的是每个dom元素
          //这个索引就代表了当前点击了哪个dom元素,点击了哪个组
          const index = this.innerHTML.trim();
          option.xAxis.data = groupData[index].map((v) => v.name);
          option.series[0].data = groupData[index].map((v) => v.hope_salary);
          option.series[1].data = groupData[index].map((v) => v.salary);
          myChart.setOption(option);
        });
      });

      // 测试
      // setTimeout(() => {
      //   option.xAxis.data = groupData[2].map((v) => v.name);
      //   option.series[0].data = groupData[2].map((v) => v.hope_salary);
      //   option.series[1].data = groupData[2].map((v) => v.salary);
      //   myChart.setOption(option);
      // }, 3000);
    }
    salaryGroup(groupData);

    //班级薪资分布
    function salarysplit(salaryData) {
      var myChart = echarts.init(document.querySelector("#salary"));
      const option = {
        title: {
          text: "薪资分布",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          bottom: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            // data: [
            //   { value: 108, name: res.data.salaryData[0].label },
            //   { value: 735, name:res.data.salaryData[1].label },
            //   { value: 580, name: res.data.salaryData[2].label},
            //   { value: 484, name: res.data.salaryData[3].label},
            // ],     
                           
          },
        ],
        color: ["#f1a445", "#5f99f7", "#6accfa", "#69cf9e"],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
    salarysplit(salaryData);
  } catch (err) {
    console.dir(err);
  }
});
